<template>
	<view class="receptionHall">
		<view class="content">
			<template v-if="userInfo.orderTakingRight == 1">
				<view class="order_list_item_box" v-if="table.list && table.list.length > 0">
					<view class="order_item_box" @click="toDetail(item)" v-for="item in table.list" :key="item">
						<view class="order_status_box">
							<view class="name_status">
								<view class="name_transfer">
									<image class="user_avatar_pic" :src="item.userAvatar"></image>
									<view class="studio_name">{{ item.userNickName }}</view>
									<view class="transfer_order" v-if="item.originStudioId != item.studioId">转单</view>
								</view>
								<view class="order_status">{{ getStatusText(item.status) }}</view>
							</view>
							<view class="order_date">订单号：{{ item.id }}</view>
						</view>
						<view class="studio_name_text">{{ item.studioName }}</view>
						<view class="order_server_info">
							<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="item?.orderGoodsSkuVOS?.length > 1">
								<view class="server_info_box" v-for="val in item.orderGoodsSkuVOS" :key="val.skuId">
									<image class="server_img" :src="val.goodsAvatar"></image>
									<view class="specs_box">{{ val.goodsName }}</view>
									<!-- <view class="server_price">×{{ val.serviceDays }}</view> -->
								</view>
							</scroll-view>
							<view class="server_info_box" v-else>
								<image class="server_img" :src="item?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
								<view class="name_price">
									<view class="server_name">{{ item?.orderGoodsSkuVOS[0]?.goodsName }}</view>
									<view class="specs_price">
										<text class="server_specs" v-if="item.type == 1">¥{{ item?.orderGoodsSkuVOS[0]?.price }}/次</text>
										<text class="server_specs" v-else>{{ item?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ item?.orderGoodsSkuVOS[0]?.price }}</text>
									</view>
								</view>
							</view>
							<view class="order_price_box">
								<view class="order_price">¥{{ item.payAmount }}</view>
								<view class="pay_text">{{ getPayText(item.status) }}</view>
							</view>
						</view>
						<view class="order_other_info_box">
							<view class="other_info_item" v-if="item.type != 1">
								<view class="other_label">宠物{{ item.petNum }}只</view>
								<view class="other_value">
									<text v-for="(val, valIndex) in item.petList" :key="valIndex">
										{{ val.petNickName }}({{ getPetTypeText(val.type) }})
										<text class="m_l_r_8" v-if="valIndex < item.petList.length - 1">|</text>
									</text>
								</view>
							</view>
							<view class="other_info_item">
								<view class="other_label">服务{{ item.serviceDays }}天</view>
								<view class="other_value">
									<text v-for="(val, valIndex) in item.serviceTimeSlotArray" :key="valIndex">
										{{ val.slice(5, 10).replace(/-/g, "/") }}
										<text class="m_l_r_8" v-if="valIndex < item.serviceTimeSlotArray.length - 1">|</text>
									</text>
								</view>
							</view>
							<view class="other_info_item" v-if="item.type != 1">
								<view class="other_label">服务地址</view>
								<view class="other_value">{{ item.address }}</view>
							</view>
							<view class="other_info_item" v-if="item.joinId">
								<view class="other_label">关联订单</view>
								<view class="other_value">{{ item.joinId }}</view>
							</view>
							<view class="other_info_item" v-if="item.type == 1 && item?.petList?.length">
								<view class="other_label">服务宠物</view>
								<view class="other_value">
									<text class="pet_name_date" v-for="(val, i) in item.petList" :key="i">{{ val.petNickName }}</text>
								</view>
							</view>
						</view>
						<view class="pet_teacher_box">
							<view class="pet_teacher_title">下单用户</view>
							<image class="pet_teacher_img" :src="item.userAvatar"></image>
							<view class="pet_teacher_name">{{ item.userNickName }}</view>
						</view>
						<view class="pet_teacher_box" v-if="identity == 1 && item.status == 1 && item.petsitterUserId">
							<view class="pet_teacher_title">服务陪宠师</view>
							<image class="pet_teacher_img" :src="item.petsitterAvatar"></image>
							<view class="pet_teacher_name">{{ item.petsitterRealName }} | {{ item.petsitterNickName }}</view>
						</view>
						<view class="order_total_price">
							<text>{{ getPayText(item.status) }}：¥{{ Number(item.payAmount) }}</text>
							<template v-if="![0, 5, 6, 7].includes(item.status)">
								<text v-if="identity == 1">,工作室收益：¥{{ Number(item.studioSharing) }}</text>
								<text>,陪宠师收益：¥{{ Number(item.income) }}</text>
							</template>
						</view>
						<view class="operation_btn_box">
							<template v-if="identity == 1 && item.status == 8">
								<view class="xjs-btn-primary-plain hollow_btn btn_mg" @click.stop="handleTransferOrder(item)">转单</view>
								<view class="xjs-btn-primary solid_btn btn_mg" @click.stop="handleCancelAllOrder(item)">取消订单</view>
								<view class="xjs-btn-primary solid_btn btn_mg" @click.stop="handleAccept(item)">立即接单</view>
								<view class="xjs-btn-primary solid_btn btn_mg" @click.stop="handleDispatch(item)">立即派单</view>
							</template>
							<view class="petTeacher" v-if="(identity == 0 && item.status == 1) || (identity == 1 && item.status == 1 && item.petsitterUserId == userInfo.id)">
								<view class="refuseOrder btn_mg" @click.stop="handleRefuse(item)">
									{{ item.type == 1 ? "拒绝接单" : "拒绝接单/转单" }}
								</view>
								<view class="time" @click.stop="handleAccept(item)">
									<view :class="[item.type == 1 ? 'fonts26' : '']">立即接单</view>
									<view v-if="item.type != 1">{{ filterTime(item.orderDispatchAutoCancelTime) }} 后未接单将自动转派</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more iconType="auto" :status="table.loading" />
				</view>
				<view class="empty_box" v-else>
					<image class="empty_img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png"></image>
					<view>暂无数据~</view>
				</view>
			</template>
			<template v-else>
				<noOrderAccpermission ref="noOrderAccpermissionRef" />
			</template>
		</view>
		<!-- 陪宠师单独的增值服务订单的拒绝接单弹框 -->
		<uni-popup ref="popupRef" type="center" :is-mask-click="false">
			<view class="unbind_pop">
				<view class="pop_title">确定拒绝接单吗？</view>
				<view class="unbind_text">
					<view class="unbind_text_explain">*原因</view>
					<textarea v-model="refuseReason" placeholder-style="color:#CACCCC" maxlength="50" class="inputBox" placeholder="原因最多50个字" />
				</view>
				<view class="pop_footer_btn">
					<view class="cancel_btn" @click="btnCancel()">取消</view>
					<view @click="handleConfig" class="xjs-btn-primary confirm_btn">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import api from "@/api/index";
import noOrderAccpermission from "../serviceHall/components/noOrderAccpermission.vue";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { useUserStoreToRefs } from "@/store/useUserStore";
import { updateUserInfo } from "@/hooks/useLogin";

let { identity, studio, studioBalance } = useStudioStoreToRefs();
const { userInfo } = useUserStoreToRefs();
let dispatchNum = ref(0);
let rceivingOrdersNum = ref(0);
const noOrderAccpermissionRef = ref();
const popupRef = ref();
const refuseReason = ref("");
const configOrderId = ref("");
const isFixed = ref(false);
const refresherTriggered = ref(false);
const tabStatus = reactive([
	{ name: "待派单", status: 8 },
	{ name: "待接单", status: 1 }
]);

const table = reactive<{
	loading: string;
	list: [];
	page: number;
	limit: number;
	status: number | string;
	appointInfo: any;
	appointList: any;
	transferOrderList: any;
	otherInfo: any;
}>({
	loading: "more",
	list: [],
	page: 1,
	limit: 20,
	status: 8,
	appointInfo: {},
	appointList: [],
	transferOrderList: [],
	otherInfo: []
});

// 判断是不是主订单
const isMainOrder = computed(() => (item) => {
	let res = item?.orderGoodsSkuVOS?.some((val) => {
		return [1, 2, 3].includes(val.goodsType);
	});
	return res;
});

// 判断是不是子订单
const isSonOrder = computed(() => (item) => {
	let res = item?.orderGoodsSkuVOS?.every((val) => {
		return val.goodsType == 4;
	});
	return res;
});

const getStatusText = (status) => {
	switch (status) {
		case 0:
			return "待付款";
		case 1:
			return "待接单";
		case 2:
			return "已接单";
		case 3:
			return "服务中";
		case 4:
			return "已完成";
		case 5:
		case 6:
		case 7:
			return "已取消";
		case 8:
			return "待派单";
		default:
			return "";
	}
};

const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};

const getPayText = (type) => {
	switch (type) {
		case 4:
		case 5:
			return "合计";
		default:
			return "实付";
	}
};

//页面滚动高度
const scrollContainer = (e) => {
	let scrollTop = e.detail.scrollTop;
	isFixed.value = scrollTop > 130 ? true : false;
};

const getOtherInfo = async () => {
	uni.getSystemInfo({
		success: async (e) => {
			let deviceId = "";
			// #ifdef APP
			deviceId = e.deviceId;
			// #endif
			const res: any = await api({
				method: "get",
				url: `/mall/user/getOtherAccountTodo?deviceId=${deviceId}`
			});
			if (res.data && res.data.length > 0) {
				table.otherInfo = [res.data[0]];
			} else {
				table.otherInfo = res.data;
			}
		}
	});
};

const changeAccountNum = () => {
	uni.navigateTo({
		url: `/pages/setting/changeAccountNumber/index`
	});
};

const toDetail = (item: any) => {
	if (item.type == 1) {
		if ([2].includes(item.status)) {
			uni.navigateTo({
				url: `/pages/studioOrders/addedServicesAllDetail/index?id=${item.id}&orderType=${-1}&status=${item.status}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/studioOrders/addedServicesDetail/index?id=${item.id}&orderType=${-1}`
			});
		}
	} else {
		if ([2].includes(item.status)) {
			uni.navigateTo({
				url: `/pages/studioOrders/allOrderDetail/index?id=${item.id}&orderType=${-1}&status=${item.status}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/studioOrders/orderDetail/index?id=${item.id}&orderType=${-1}`
			});
		}
	}
};

const filterTime = (endTime) => {
	// let nowTime = getTimeFormat(getCurrentTime('date'))
	// if((Math.floor(getTimeFormat(endTime) - nowTime) / 3600) > 24){
	// 	return getCurrentTime('month',endTime) + ' ' + getCurrentTime('hour',endTime)
	// }
	let time = getCurrentTime("date");
	if (getCurrentTime("year", endTime) === getCurrentTime("year", time)) {
		return getCurrentTime("hour", endTime);
	}
	return getCurrentTime("month", endTime) + " " + getCurrentTime("hour", endTime);
};

//当前时间
const getCurrentTime = (type = "date", time = "") => {
	let date = time == "" ? new Date() : new Date(time); //当前时间
	let year = date.getFullYear(); //年
	let month = repair(date.getMonth() + 1); //月
	let day = repair(date.getDate()); //日
	let hour = repair(date.getHours()); //时
	let minute = repair(date.getMinutes()); //分
	let second = repair(date.getSeconds()); //秒

	let curTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

	if (type == "date") {
		return curTime;
	} else if (type == "month") {
		return month + "/" + day;
	} else if (type == "year") {
		return year + month + day;
	} else {
		return hour + ":" + minute;
	}
};

const repair = (i) => {
	if (i >= 0 && i <= 9) {
		return "0" + i;
	} else {
		return i;
	}
};

const getTimeFormat = (zcTime) => {
	let time = new Date(zcTime.replace(/-/g, "/")).getTime() / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
	return time;
};

const btnCancel = () => {
	popupRef.value.close();
};

const handleConfig = async () => {
	if (refuseReason.value.trim() == "") {
		uni.showToast({
			title: "请输入拒绝原因",
			icon: "none"
		});
		return;
	}
	const res = await api({
		method: "post",
		url: `/mall/order/cancelV2`,
		data: {
			id: configOrderId.value,
			refuseReason: refuseReason.value
		}
	});
	if (res.code == 0) {
		uni.showToast({
			title: "拒绝接单成功"
		});
		btnCancel();
	}
	await onDataInit();
};

const handleChangeStatus = async (item: any) => {
	table.status = item.status;
	await onDataInit();
	scrollToTop();
};

const scrollToTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};

// 获取数据
const onDataGet = async () => {
	let status = identity.value == 1 ? table.status : 1;
	return new Promise(async (resolve, reject) => {
		table.loading = "loading";
		try {
			const {
				data: { total = 0, records = [] }
			} = await api({
				method: "get",
				contentType: "json",
				url: "/mall/order/orderHall",
				data: {
					page: table.page,
					limit: table.limit,
					status: status,
					studioId: studio.value.id
				}
			});
			if (status == 8) dispatchNum.value = total;
			if (status == 1) rceivingOrdersNum.value = total;
			console.log(records);
			table.list = table.page == 1 ? records : table.list.concat(records);
			if (!records.length || table.list.length >= total) {
				table.loading = "noMore";
			} else {
				table.loading = "more";
			}
			resolve(true);
		} catch (error) {
			uni.hideLoading();
			table.loading = "more";
			reject(false);
		} finally {
		}
	});
};

// 数据初始化
const onDataInit = async (option = {}) => {
	if (option?.hasOwnProperty("status")) {
		table.status = option?.status;
	}
	table.list = [];
	table.page = 1;
	await onDataGet();
};

onMounted(() => {
	setTimeout(async () => {
		await onDataInit();
	}, 100);
});

const getInfo = async () => {
	if (identity.value == 1) {
		const {
			data: { total = 0, records = [] }
		} = await api({
			method: "get",
			url: `/mall/order/orderHall`,
			data: {
				page: table.page,
				limit: table.limit,
				status: table.status == 8 ? 1 : 8,
				studioId: studio.value.id
			}
		});
		table.status == 8 ? (rceivingOrdersNum.value = total) : (dispatchNum.value = total);
	}
	noOrderAccpermissionRef.value && noOrderAccpermissionRef.value.getExam();
	// if(userInfo.value.orderTakingRight != 1){
	// 	noOrderAccpermissionRef.value && noOrderAccpermissionRef.value.getExam()
	// }
};

// scroll-view下拉刷新
const refresherrefresh = () => {
	refresherTriggered.value = true;
	onDataInit();
	setTimeout(() => {
		refresherTriggered.value = false;
	}, 1000);
	updateUserInfo().then((res) => {
		noOrderAccpermissionRef.value && noOrderAccpermissionRef.value.getExam();
	});
};

// 页面下拉刷新
const onRefresh = async () => {
	console.log("onPullDownRefresh");
	if (table.loading == "loading") {
		uni.stopPullDownRefresh();
	} else {
		try {
			await onDataInit();
		} catch (error) {}
		uni.stopPullDownRefresh();
	}
};

// 触底
const onLoadMore = () => {
	console.log("onReachBottom");
	if (table.loading == "noMore") return false;
	table.page++;
	onDataGet();
};

// 拒绝，转单
const handleRefuse = async (item) => {
	await handleOrderStatusChange(item);
	if (item.type == 1) {
		configOrderId.value = item.id;
		popupRef.value.open();
	} else {
		uni.showModal({
			title: "确定拒绝接单/转单吗？",
			content: "注意：提交后订单将转派给其他陪宠师进行接单",
			success: async (res) => {
				if (res.confirm) {
					const res = await api({
						method: "post",
						url: `/mall/order/refuse`,
						data: {
							orderId: item.id
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "转单成功"
						});
					}
					await onDataInit();
				}
			}
		});
	}
};

// 获取指定人员信息
const getAppointInfo = async (item) => {
	return new Promise(async (resolve, reject) => {
		try {
			const res = await api({
				method: "get",
				url: `/mall/studio/petsitter-team/dispatchUserDetail?orderId=${item.id}`
			});
			table.appointInfo = res.data || {};
			resolve(true);
		} catch (error) {
			reject(false);
		}
	});
};

const getAppointList = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res: any = await api({
			method: "get",
			url: `/mall/studio/petsitter-team/dispatchPage`,
			data: {
				page: 1,
				limit: 20,
				orderId: item.id
			}
		});
		if (res.code == 0) {
			table.appointList = res.data.records || [];
			resolve(true);
		} else {
			uni.showModal({
				title: "温馨提示",
				content: "本订单的服务地址不在本工作室所有的陪宠师的接单范围内,您可以转单给合适的工作室接单",
				showCancel: false,
				confirmText: "好的",
				success: (res) => {
					if (res.confirm) {
						onDataInit();
					}
				}
			});
			reject(false);
		}
	});
};

//转单选择列表
const getTransferOrderList = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res: any = await api({
			method: "get",
			url: `/mall/studio/recommendPage`,
			data: {
				page: 1,
				limit: 20,
				currentStudioId: studio.value.id,
				transferStudioFlag: 1,
				orderId: item.id
			}
		});
		if (res.code == 0) {
			table.transferOrderList = res.data.records || [];
			resolve(true);
		} else {
			uni.showModal({
				title: "温馨提示",
				content: "本订单所在城市暂无工作室",
				showCancel: false,
				confirmText: "好的",
				success: (res) => {
					if (res.confirm) {
						onDataInit();
					}
				}
			});
			reject(false);
		}
	});
};

// 立即派单
const handleDispatch = async (item) => {
	await handleOrderStatusChange(item);
	await getAppointInfo(item);
	await getAppointList(item);
	if (JSON.stringify(table.appointInfo) == "{}" && table.appointList.length == 0) {
		uni.showModal({
			title: "温馨提示",
			content: "该单已被工作室其他所有陪宠师拒绝过了您可以自己接单或取消订单",
			showCancel: false,
			confirmText: "好的",
			success: (res) => {
				if (res.confirm) {
					onDataInit();
				}
			}
		});
		return false;
	}
	uni.navigateTo({
		url: `/pages/myStudio/studio/selectDispatch/index?id=${item.id}&petsitterType=${item.petsitterType}&serviceDays=${item.serviceDays}&status=${item.status}`
	});
};

//转单
const handleTransferOrder = async (item) => {
	await handleOrderStatusChange(item);
	await getTransferOrderList(item);
	if (table.transferOrderList.length == 0) {
		uni.showModal({
			title: "温馨提示",
			content: "该单已被同城所有工作室拒绝过了您可以自己接单或取消订单",
			showCancel: false,
			confirmText: "好的",
			success: (res) => {
				if (res.confirm) {
					onDataInit();
				}
			}
		});
		return false;
	}
	uni.navigateTo({
		url: `/pages/myStudio/studio/selectTransferOrder/index?id=${studio.value.id}&longitudes=${item.addressAxis[0]}&latitudes=${item.addressAxis[1]}&orderId=${item.id}`
	});
};

// 立即接单
const handleAccept = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "提示",
		content: "确定接单？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/acceptV2`,
					data: {
						id: item.id,
						petsitterUserId: userInfo.value.id
					}
				});
				if (res.code == 0) {
					uni.navigateTo({
						url: `/pages/myStudio/studio/dispatchSuccess/index?type=receivingOrders&id=${item.userId}&serviceDays=${item.serviceDays}&userNickName=${item.userNickName}&userAvatar=${item.userAvatar}`
					});
				}
			}
		}
	});
};

// 店长取消订单
const handleCancelAllOrder = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "确定取消订单吗？",
		content: "注意：确定后订单将关闭",
		success: async (res) => {
			if (res.confirm) {
				uni.navigateTo({
					url: `/pages/studioOrders/cancellationReason/index?orderId=${item.id}&orderType=${-1}`
				});
			}
		}
	});
};

// 判断订单状态变更
const handleOrderStatusChange = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/checkOrderStatus?orderId=${item.id}&status=${item.status}&type=-1`
		});
		if (res.code == 0) {
			if (res.data == 1) {
				uni.showModal({
					title: "提示",
					content: "数据已过期，请刷新重试",
					showCancel: false,
					confirmText: "好的",
					success: (res) => {
						if (res.confirm) {
							onDataInit();
						}
					}
				});
				reject(false);
			} else {
				resolve(true);
			}
		} else {
			reject(false);
		}
	});
};
defineExpose({ onRefresh, onLoadMore, onDataInit, getInfo, getOtherInfo });
</script>

<style scoped lang="scss">
.receptionHall {
	.fixed {
		position: fixed !important;
		top: 0;
		box-sizing: border-box;
		// width: 100%;
		z-index: 1000;
	}

	.fonts26 {
		font-size: 26rpx !important;
	}

	.unbind_pop {
		width: 622rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 64rpx 40rpx;
		box-sizing: border-box;

		.pop_title {
			font-weight: 500;
			font-size: 40rpx;
			color: #1b2120;
			text-align: center;
		}

		.unbind_text {
			margin-top: 48rpx;
			font-size: 30rpx;
			color: #1b2120;
			display: flex;

			.unbind_text_explain {
				width: 100rpx;
				margin-right: 16rpx;
			}

			.inputBox {
				width: calc(100% - 100rpx - 16rpx);
				background: #f9f6f6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 32rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #1b2120;
				width: 100%;
			}
		}

		.pop_footer_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;

			.cancel_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 263rpx;
				height: 88rpx;
				background-color: #ffffff;
				border-radius: 44rpx;
				border: 2rpx solid #ff6084;
				font-weight: 400;
				font-size: 28rpx;
				color: #ff6084;
			}

			.confirm_btn {
				width: 263rpx;
				height: 88rpx;
			}
		}
	}

	.empty_box {
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #1b2120;

		.empty_img {
			width: 400rpx;
			height: 315rpx;
			margin-top: 320rpx;
			margin-bottom: 50rpx;
		}
	}

	.order_type_tab_head_active {
		.type_text {
			font-size: 32rpx !important;
			color: #1b2120 !important;
			font-weight: bold !important;
		}

		.active_type {
			bottom: 0;
			width: 32rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}

	.content {
		// overflow: auto;
		// height: 100vh;
		.order_type_tab_box {
			position: sticky;
			top: 0;
			display: flex;
			width: 100%;
			background: #ffffff;
			padding: 0 40rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #e4e6e6;
			z-index: 1;

			.order_type_tab_head {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 88rpx;
				padding-top: 20rpx;
				box-sizing: border-box;

				.type_text {
					font-weight: 400;
					font-size: 28rpx;
					height: 100%;
					color: #5c5e5e;
					text-align: center;
				}
			}
		}

		.list {
			padding: 32rpx;
			box-sizing: border-box;
			padding-bottom: calc(var(--safe-area-bottom) + 32rpx + 100rpx);

			.item {
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				width: 100%;
				background: #ffffff;
				border-radius: 24rpx;
				margin-bottom: 40rpx;

				.status {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40rpx;

					.user {
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}

						.name {
							margin: 0 8rpx;
							font-size: 26rpx;
							color: #1b2120;
							max-width: 240rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.appoint {
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
							text-align: center;
							color: #fff;
							width: 88rpx;
							line-height: 40rpx;
							background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
							border-radius: 24rpx 24rpx 24rpx 0px;
						}
					}

					.statusName {
						font-weight: bold;
						font-size: 30rpx;
						color: #1b2120;
					}
				}

				.service {
					padding: 32rpx 24rpx;
					box-sizing: border-box;
					width: 100%;
					background: #f8f8f8;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					.petInfo {
						display: flex;
						align-items: center;
						padding-bottom: 32rpx;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 24rpx;
						}

						.petRight {
							width: calc(100% - 160rpx - 16rpx);
							margin-left: 16rpx;

							.rightTitle {
								display: flex;
								justify-content: space-between;
								font-weight: bold;
								font-size: 30rpx;
								color: #1b2120;
								margin-bottom: 24rpx;

								view {
									&:last-child {
										font-size: 26rpx;
									}
								}
							}

							.pet {
								display: flex;
								align-items: center;
								font-size: 26rpx;
								color: #7c807f;

								&:last-child {
									margin-top: 16rpx;
								}

								.petLabel {
									width: 138rpx;
									text-align: right;
								}

								.petLabelWrap {
									width: calc(100% - 138rpx);
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									-o-text-overflow: ellipsis;

									.dividing_line {
										display: inline-block;
										width: 2rpx;
										height: 24rpx;
										background: #7c807f;
										margin: 0 8rpx 0 0;
									}
								}

								.option {
									position: relative;
									margin-right: 16rpx;

									&:last-child {
										margin-right: 0;

										&::after {
											content: none;
										}
									}

									&::after {
										content: "";
										position: absolute;
										right: -8rpx;
										transform: translateY(-50%);
										top: 50%;
										height: 26rpx;
										width: 1rpx;
										background-color: #7c807f;
									}
								}
							}
						}
					}

					.border {
						border-top: 1rpx solid #e6e6e6;
					}

					.serviceInfo {
						display: flex;
						padding: 32rpx 0;

						&:last-child {
							padding-bottom: 0;
						}

						.title {
							font-weight: 500;
							font-size: 30rpx;
							color: #1a1a1a;
							width: 168rpx;
						}

						.explain {
							width: calc(100% - 168rpx);
							font-size: 26rpx;
							color: #7c807f;
							display: flex;
							align-items: center;

							image {
								width: 48rpx;
								height: 48rpx;
								border-radius: 50%;
								margin-right: 8rpx;
							}
						}
					}
				}

				.amount {
					display: flex;
					justify-content: flex-end;
					flex-wrap: nowrap;
					font-size: 26rpx;
					color: #1b2120;
					margin-top: 16rpx;
					font-weight: bold;
				}

				.storeManager {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-between;

					view {
						width: 196rpx;
						height: 72rpx;
						border-radius: 36rpx;
					}
				}

				.petTeacher {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-between;
					text-align: center;

					.refuseOrder {
						width: 240rpx;
						line-height: 72rpx;
						background: #ffffff;
						border-radius: 72rpx;
						border: 2rpx solid #ff6084;
						font-size: 26rpx;
						color: #ff6084;
					}

					.time {
						width: 366rpx;
						height: 72rpx;
						background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
						color: #fff;
						border-radius: 72rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						view {
							font-size: 26rpx;
							color: #fff;

							&:last-child {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}
	}
}

.otherNum {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	box-sizing: border-box;
	margin: 32rpx 0;

	.otherTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lable {
			font-weight: bold;
			font-size: 36rpx;
			color: #1b2120;
		}

		.value {
			display: flex;
			align-items: center;

			.valueText {
				font-size: 24rpx;
				color: #7c807f;
			}
		}
	}

	.otherMain {
		display: flex;
		align-items: center;
		margin-top: 52rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.name {
			margin-left: 16rpx;
			font-size: 32rpx;
			color: #1b2120;

			.explain {
				margin-top: 16rpx;
				font-size: 26rpx;
				color: #7c807f;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

.changeNum {
	padding: 32rpx 32rpx 32rpx 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 30rpx;
	font-weight: 500;
	color: #1b2120;
}

//新版本样式
.order_list_item_box {
	padding: 24rpx 32rpx 24rpx;
	box-sizing: border-box;
	//padding-bottom: calc(var(--safe-area-bottom) + 48rpx + 220rpx);

	.order_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.order_status_box {
			.name_status {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_transfer {
					display: flex;
					flex-direction: row;
				}

				.user_avatar_pic {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background: #f9f6f6;
					margin-right: 16rpx;
				}

				.studio_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1b2120;
				}

				.transfer_order {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 8rpx;
					box-sizing: border-box;
					height: 40rpx;
					background: #7777f3;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					margin-left: 8rpx;
				}

				.order_status {
					font-weight: 400;
					font-size: 26rpx;
					color: #6363ff;
				}
			}

			.order_date {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin-top: 16rpx;
			}
		}

		.studio_name_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
			margin-top: 48rpx;
			border-bottom: 1rpx solid #e4e6e6;
			padding-bottom: 24rpx;
			box-sizing: border-box;
		}

		.order_server_info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.server_info_box {
				display: flex;
				align-items: center;
				flex-direction: row;
				width: calc(100% - 120rpx - 16rpx);

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
				}

				.name_price {
					margin-left: 16rpx;
					max-width: calc(100% - 120rpx - 16rpx);

					.server_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.specs_price {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						.server_specs {
						}

						.server_price {
						}
					}
				}
			}

			.multiple_specs_scroll {
				white-space: nowrap;
				width: calc(100% - 128rpx);

				.server_info_box {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					position: relative;
					margin-right: 16rpx;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.specs_box {
						position: absolute;
						top: 8rpx;
						left: 8rpx;
						max-width: 98rpx;
						background: #f9f6f6;
						border-radius: 4rpx;
						font-weight: 400;
						font-size: 18rpx;
						color: #1b2120;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.server_price {
						position: absolute;
						bottom: 0;
						right: 0;
						padding: 8rpx 10rpx;
						box-sizing: border-box;
						background: rgba(0, 0, 0, 0.35);
						border-radius: 24rpx 0rpx 24rpx 0rpx;
						font-weight: bold;
						font-size: 18rpx;
						color: #ffffff;
					}
				}
			}

			.order_price_box {
				width: 128rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

				.order_price {
					font-weight: bold;
					font-size: 28rpx;
					color: #1b2120;
				}

				.pay_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}

		.order_other_info_box {
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.other_info_item {
				display: flex;
				flex-direction: row;
				margin-bottom: 40rpx;

				.other_label {
					width: 96rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #5c5e5e;
				}

				.other_value {
					max-width: calc(100% - 96rpx - 16rpx);
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-left: 16rpx;

					.pet_name_date {
						display: inline-block;
						// margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-right: 24rpx;
					}
				}
			}

			.other_info_item:last-child {
				margin-bottom: 0;
			}
		}

		.pet_teacher_box {
			display: flex;
			align-items: center;
			flex-direction: row;
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.pet_teacher_title {
				width: 130rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #5c5e5e;
			}

			.pet_teacher_img {
				margin-left: 16rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}

			.pet_teacher_name {
				margin-left: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #7c807f;
			}
		}

		.order_total_price {
			text-align: right;
			margin-top: 16rpx;
			//margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
		}

		.operation_btn_box {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.hollow_btn {
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.solid_btn {
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.btn_mg {
				margin-right: 16rpx;
			}

			.btn_mg:last-child {
				margin-right: 0;
			}

			.refuse_btn {
				width: 240rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.accept_immediately_box {
				text-align: center;
				width: 366rpx;
				height: 72rpx;
				background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
				border-radius: 62rpx;
				font-weight: 400;
				color: #ffffff;
				padding: 10rpx 0 8rpx;
				box-sizing: border-box;
				line-height: 1;
				margin-left: 16rpx;
				margin-bottom: 40rpx;

				.accept_immediately {
					font-size: 26rpx;
				}

				.immediately_time {
					font-size: 20rpx;
					margin-top: 8rpx;
				}
			}

			.petTeacher {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;

				.refuseOrder {
					width: 240rpx;
					line-height: 72rpx;
					background: #ffffff;
					border-radius: 72rpx;
					border: 2rpx solid #ff6084;
					font-size: 26rpx;
					color: #ff6084;
				}

				.time {
					width: 366rpx;
					height: 72rpx;
					background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
					color: #fff;
					border-radius: 72rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					view {
						font-size: 26rpx;
						color: #fff;

						&:last-child {
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>
